import React from 'react';

import QRCode from 'qrcode.react';

import classnames from 'classnames';
//component
import ReIcon from 'components/widgets/ReIcon';

import './index.less';


export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
    };

    static defaultProps = {
        //name: 'component name'
    };


    constructor(props, context) {

        super(props, context);


        // init state;
        this.state = {};
    }

    componentWillMount() {
        this._isMounted = true;

    }

    componentDidMount() {

    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    renderDialog() {
        const {visible, type, url, closeHandler} = this.props;
        return (
            <div className={visible ? 'qr-code-mask fade-in' : 'qr-code-mask fade-out'}
                 onClick={() => closeHandler()}>
                <div className="qr-code-wrapper" onClick={(e) => e.stopPropagation()}>
                    <div className="qr-code-title">
                        <p>{type === $$.SEM.WECHAT_PAY ? '微信支付' : ''}</p>
                        <span onClick={(e) => closeHandler()}>
                            <ReIcon icon="window_closes"/>
                        </span>
                    </div>
                    <div className="qr-code-content">
                        {
                            type === $$.SEM.WECHAT_PAY &&
                            <ReIcon icon="WePayLogo" className="wei-pay-logo"/>
                        }
                        <QRCode value={url} size={200}/>
                        <div className="qr-code-desc">
                            {
                                type === $$.SEM.WECHAT_PAY &&
                                <span className="icon">
                                    <ReIcon icon="icon_scan" className="scan"/>
                                </span>
                            }
                            <span>
                                {type === $$.SEM.WECHAT_PAY ? '请使用微信扫描二维码\r\n以完成支付' : ''}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        )
    }

    render() {

        const classNames = classnames({
            'orin-w-qrcodepay-root': true,
            [this.props.className]: this.props.className ? true : false
        });

        return (
            <div className={classNames}>
                {this.renderDialog()}
            </div>
        );
    }
}
